<template>
  <div class="modulesbox">
    <el-form size="small" label-width="80px">
      <template v-if="activeData.__config__.tag === 'word-swipe'">
        <el-form-item label="模块名称">
          <div class="moduleinfo">
            <el-input
              v-model="activeData.moduleName"
              placeholder="请输入模块名称"
            ></el-input>
            <el-checkbox v-model="activeData.isHide" class="hideInfo"
              >隐藏</el-checkbox
            >
          </div>
        </el-form-item>
        <el-form-item label="图标样式">
          <div class="moduleinfo" ref="iconbox">
            <el-radio-group v-model="activeData.iconid" class="moduleinfo">
              <el-radio :label="1">默认</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>

            <!-- <el-button
              v-show="activeData.iconid === 2"
              class="hideInfo"
              @click="selectIcon"
              >选择图标</el-button
            > -->
            <el-upload v-show="activeData.iconid === 2" style="margin-left:10px;"
                              class="upload-demo"
                              ref="upload"
                              :action="uploadFileUrl"
                              :headers="{'Authorization':`Bearer ${token}`}"
                              :on-success="handleUploadSuccess"
                              :before-upload="beforeUploadHandler"
                              :multiple="false"
                              :show-file-list="false">
                              <el-button slot="trigger" size="small" ><i class="el-icon-upload el-icon--right"></i>选择图标</el-button>
                          </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="滚动方向">
          <el-radio-group v-model="activeData.scrollDirection">
            <el-radio label="column">向上</el-radio>
            <el-radio label="row">向左</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="高度设置">
          <div class="moduleinfo">
            <el-radio-group v-model="activeData.heightSetid" class="moduleinfo">
              <el-radio :label="1">默认</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
            <el-input
              v-show="activeData.heightSetid === 2"
              v-model="activeData.heightSet"
              class="hideInfo inputinfo"
              @change="heightSetChange"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="配置方式">
          <el-select v-model="activeData.setType">
            <el-option label="手动配置" :value="1"></el-option>
            <el-option label="数据源配置" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据源" v-show="activeData.setType === 2">
          <el-select v-model="activeData.dataOrigin">
            <el-option label="消息管理" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示字段" v-show="activeData.setType === 2">
          <el-select v-model="activeData.showField">
            <el-option label="消息内容" :value="1"></el-option>
           
          </el-select>
        </el-form-item>
        <div class="moduleinfo listbox" v-show="activeData.setType === 1">
          <span @click="leftmove" class="turninfo">&lt;</span>

          <ul class="textList" ref="textul">
            <li
              v-for="(item, index) in activeData.moduleList"
              :key="index"
              :class="[ind === index ? 'curcolor' : '']"
              @click="ind = index"
            >
              
              <div class="textlunbo">
                <span>{{ item.title }}</span>
                <span :style="{width:'90%',height:'2px',background:ind === index ? '#1890FF' : 'transparent',marginTop:'8px'}"></span>
              </div>
            </li>
          </ul>

          <span @click="rightmove" class="turninfo">&gt;</span>
        </div>
        <div style="border:0.5px solid #dcdfe6;margin-bottom:10px;" v-show="activeData.setType === 1"></div>
        <el-input v-show="activeData.setType === 1"
          class="listbox" type="textarea" :rows="3" :clearable="true" maxlength="80" show-word-limit resize="none" placeholder="请输入"
          v-model="activeData.moduleList[ind].contentDisplay"
        ></el-input>
        <!-- <el-form-item label="文本颜色" v-show="activeData.setType === 1">
          <div class="moduleinfo">
            <el-radio-group v-model="activeData.colorSetid" class="moduleinfo">
              <el-radio :label="1">默认</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
            <el-color-picker
              class="hideInfo"
              v-model="activeData.moduleList[ind].color"
              v-show="activeData.colorSetid === 2"
            ></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="文本颜色" v-show="activeData.setType === 2">
          <div class="moduleinfo">
            <el-radio-group v-model="activeData.colorSetid2" class="moduleinfo">
              <el-radio :label="1">默认</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
            <el-color-picker
              class="hideInfo"
              v-model="activeData.colorSet"
              v-show="activeData.colorSetid2 === 2"
            ></el-color-picker>
          </div>
        </el-form-item> -->
        <el-form-item label="文本设置" style="margin-top:15px;">
          <el-select v-model="moduleTextType">
            <el-option label="模块名称" :value="1"></el-option>
            <el-option label="公文内容" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字号" v-if="moduleTextType===1">
           <el-select
                        v-model="activeData.fontSizeModule"
                        :style="{width: '100px'}" @change="changeFont3"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置"  v-if="moduleTextType===1">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-model="activeData.backColorModule" size="small" ></el-color-picker></span>
                      <span :class="activeData.boldModule ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('boldModule')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italicModule ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italicModule')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underlineModule ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underlineModule')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlignModule == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlignModule','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlignModule == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlignModule','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlignModule == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlignModule','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlagModule ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlagModule')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeightModule" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlagModule"  @change="changeHeight3"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
        <el-form-item label="字号" v-if="moduleTextType===2 && activeData.setType === 1">
           <el-select
                        v-model="activeData.moduleList[ind].fontSize"
                        :style="{width: '100px'}"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置"  v-if="moduleTextType===2 && activeData.setType === 1">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-model="activeData.moduleList[ind].backColor" size="small" ></el-color-picker></span>
                      <span :class="activeData.moduleList[ind].bold ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyleCent('bold')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.moduleList[ind].italic ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyleCent('italic')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.moduleList[ind].underline ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyleCent('underline')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.moduleList[ind].textAlign == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttextCent('textAlign','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.moduleList[ind].textAlign == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttextCent('textAlign','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.moduleList[ind].textAlign == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttextCent('textAlign','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.moduleList[ind].heightFlag ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyleCent('heightFlag')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.moduleList[ind].lineHeight" style="width:100px;margin-left:10px;"
                        v-show="activeData.moduleList[ind].heightFlag"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
        <el-form-item label="字号" v-if="moduleTextType===2 && activeData.setType === 2">
           <el-select
                        v-model="activeData.fontSizeGetText"
                        :style="{width: '100px'}"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置"  v-if="moduleTextType===2 && activeData.setType === 2">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-model="activeData.backColorGetText" size="small" ></el-color-picker></span>
                      <span :class="activeData.boldGetText ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('boldGetText')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italicGetText ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italicGetText')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underlineGetText ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underlineGetText')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlignGetText == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlignGetText','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlignGetText == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlignGetText','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlignGetText == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlignGetText','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlagGetText ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlagGetText')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeightGetText" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlagGetText"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
      </template>
      <template v-if="activeData.__config__.tag==='source-detail'">
         <el-form-item label="数据源">
         <el-select v-model="activeData.source">
            <el-option v-for="item in activeData.datasource" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="显示字段">
         <el-input></el-input>
        </el-form-item> -->
      </template>
      <template v-if="activeData.__config__.tag==='free-container'">
         <el-form-item label="模块名称">
        <div class="moduleinfo">
            <el-input
              v-model="activeData.moduleName"
              placeholder="请输入模块名称"
            ></el-input>
            <el-checkbox v-model="activeData.isHide" class="hideInfo"
              >隐藏</el-checkbox
            >
          </div>
        </el-form-item>
        <el-form-item label="填充背景">
          
            <el-radio-group v-model="activeData.backgroundid" class="moduleinfo">
              <el-radio :label="1">默认</el-radio>
              <el-radio :label="2">隐藏</el-radio>
              <el-radio :label="3">自定义</el-radio>
            </el-radio-group>
            
          
          <div v-show="activeData.backgroundid === 3" class="continfo">
            <span class="centinfo">类型：</span>
            <el-select v-model="activeData.backgroundType">
            <el-option label="颜色填充" :value="1"></el-option>
            
          </el-select>
          </div>
          <div v-show="activeData.backgroundid === 3" class="continfo">
            <span class="centinfo">背景色：</span>
            <el-color-picker
              class="hideInfo"
              v-model="activeData.backgroundSet"
              
            ></el-color-picker>
          </div>
        </el-form-item>
      </template>
      <template v-if="activeData.__config__.tag==='information-item'"> 
         <el-form-item label="标题">
         <el-input v-model="activeData.title"></el-input>
        </el-form-item>
         <el-form-item label="字号">
           <el-select
                        v-model="activeData.fontSize"
                        :style="{width: '100px'}" @change="changeFont"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置">
         <div class="setBox">
          <span  class="colorSetBox"><el-color-picker v-model="activeData.backColor" size="small" ></el-color-picker></span>
                      <span :class="activeData.bold ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('bold')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italic ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italic')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underline ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underline')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlign == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlign','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlign == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlign','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlign == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlign','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlag ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlag')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeight" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlag"  @change="changeHeight"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
        <el-form-item label="高度设置">
           <div class="moduleinfo">
            <el-radio-group v-model="activeData.heightSetid" class="moduleinfo">
              <el-radio :label="1">默认</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
            <el-input
              v-show="activeData.heightSetid === 2"
              v-model="activeData.heightSet"
              class="hideInfo inputinfo"
              @change="heightSetChange"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="图标设置">
          <div class="setBox">
          <span  class="colorSetBox"><el-color-picker v-model="activeData.backColorIcon" size="small" ></el-color-picker></span>
                      <span :class="activeData.boldIcon ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('boldIcon')"> <img :src="boldIcon" /></span>
                      <el-checkbox v-model="activeData.isHide" class="hideInfo"
              >隐藏</el-checkbox
            >
       </div>
       
        </el-form-item>
        <el-form-item  label="跳转页面">
                  <el-select placeholder="请选择" size="small" style="width:100%;"  v-model="activeData.jumpPath">
                    <el-option v-for=" item in this.$store.state.mobile.pageStore" :label="item" :value="item" :key='item'></el-option>
                  </el-select>
                </el-form-item>
      </template>

<template v-if="activeData.__config__.tag==='message-List'"> 
          <el-form-item label="数据源">
           <el-select v-model="activeData.sourceList" multiple>
              <el-option v-for="mesitem in messageType" :key="mesitem.value" :label="mesitem.label" :value="Number(mesitem.value)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题字段">
           <el-select v-model="activeData.title">
              <el-option label="消息标题" :value="1" ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="字号">
           <el-select
                        v-model="activeData.fontSize"
                        :style="{width: '100px'}" @change="changeFont"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置">
         <div class="setBox">
          <span class="colorSetBox"><el-color-picker v-model="activeData.backColor" size="small" ></el-color-picker></span>
                      <span :class="activeData.bold ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('bold')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italic ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italic')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underline ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underline')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlign == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlign','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlign == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlign','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlign == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlign','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlag ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlag')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeight" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlag"  @change="changeHeight"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
         <el-form-item label="描述字段">
           <el-select v-model="activeData.description">
              <el-option label="消息内容" :value="1" ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="字号">
           <el-select
                        v-model="activeData.fontSize2"
                        :style="{width: '100px'}" @change="changeFont2"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置">
         <div class="setBox">
          <span class="colorSetBox"><el-color-picker v-model="activeData.backColor2" size="small" ></el-color-picker></span>
                      <span :class="activeData.bold2 ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('bold2')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italic2 ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italic2')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underline2 ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underline2')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlign2 == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlign2','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlign2 == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlign2','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlign2 == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlign2','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlag2 ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlag2')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeight2" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlag2"  @change="changeHeight2"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
        <!-- <el-form-item label="跳转页面">
           
        </el-form-item> -->
      </template>
<template v-if="activeData.__config__.tag==='mobileSearch'">
         <el-form-item label="模块样式">
        <div class="searchStyle">
          <div class="searchitem">
           <div class="searchinfo" :style="{borderColor:activeData.curid===1?'#1890FF':'white'}" @click="changeSearchType(1)">
            <div class="searchone" style="border-radius:22.5px;background:#f7f8fa;">
              <img :src="searchicon" alt="" class="searchicon">
              <span class="searchtext">请输入关键词</span>
            </div>
           </div>
           <div class="searchinfo" :style="{borderColor:activeData.curid===2?'#1890FF':'white'}" @click="changeSearchType(2)">
           <div class="searchone" style="border-radius:22.5px;">
              <img :src="searchicon" alt="" class="searchicon">
              <span class="searchtext">请输入关键词</span>
            </div>
           </div>
          </div>
          <div>
            
          </div>

          </div>
          <div class="searchStyle">
          <div class="searchitem">
           <div class="searchinfo" :style="{borderColor:activeData.curid===3?'#1890FF':'white'}" @click="changeSearchType(3)">
            <div class="searchone" style="border-radius:3px;background:#f7f8fa;">
              <img :src="searchicon" alt="" class="searchicon">
              <span class="searchtext">请输入关键词</span>
            </div>
           </div>
           <div class="searchinfo" :style="{borderColor:activeData.curid===4?'#1890FF':'white'}" @click="changeSearchType(4)">
           <div class="searchone" style="border-radius:3px;">
              <img :src="searchicon" alt="" class="searchicon">
              <span class="searchtext">请输入关键词</span>
            </div>
           </div>
          </div>
          <div>
            
          </div>

          </div>
          
        </el-form-item>
        <el-form-item label="搜索内容">
          <template>
    <el-table
      :data="activeData.searchData"
      style="width: 100%">
      <el-table-column
        prop="goal"
        label="搜索对象"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="search"
        label="搜索"
        align="center"
        >
<template slot-scope="scope">
               <i class="el-icon-check" style="color:#21C489;cursor: pointer;" v-show="scope.row.isSearch" @click="searchTurn(scope.$index)"></i>
               <i class="el-icon-close" style="color:red;cursor: pointer;" v-show="!scope.row.isSearch" @click="searchTurn(scope.$index)"></i>
                 </template>
      </el-table-column>
      <el-table-column
              prop="sort"
              label="排序"
              align="center"
            >
              <template slot-scope="scope">
                  <i v-if="scope.$index !==0"  class="el-icon-top" style="cursor: pointer;" @click="moveUp(scope.$index,scope.row)"></i>
                  <i v-if="scope.$index !==(activeData.searchData.length-1)" class="el-icon-bottom" style="cursor: pointer;" @click="moveDown(scope.$index,scope.row)" ></i>
                  <!-- <img :src="up" alt="" style="width:15px;height:22px;display:flex;align-items:center;" @click="changeIndex(scope.row.index,-1)">
                  <img :src="down" alt="" style="width:15px;height:22px;display:flex;align-items:center"  @click="changeIndex(scope.row.index,1)"> -->
              </template>
            </el-table-column>
    </el-table>
  </template>
           
        </el-form-item>
         <el-form-item label="搜索提示">
        
    <el-input v-model="activeData.placeholder"></el-input>
  
           
        </el-form-item>
          
      </template>
      <template v-if="activeData.__config__.tag==='imgandtext'">
        <el-form-item label="模块名称">
          <div class="moduleinfo">
            <el-input
              v-model="activeData.title"
              placeholder="请输入"
            ></el-input>
            <el-checkbox v-model="activeData.isHide" class="hideInfo"
              >隐藏</el-checkbox
            >
          </div>
        </el-form-item>
       
         <el-form-item  label="宽高">
                       <div class="picWidth">
                          <el-input v-model="activeData.moduleList[activeData.__config__.defaultValue].width" type="number"></el-input>
                          <img :src="rlinkM">
                          <el-input v-model="activeData.moduleList[activeData.__config__.defaultValue].height" type="number"></el-input>
                       </div>
                    </el-form-item>
                    <el-form-item label="配置方式">
          <el-select v-model="activeData.moduleList[activeData.__config__.defaultValue].setType" @change="setTypechange">
            <el-option label="手动配置" :value="1"></el-option>
            <el-option label="数据源配置" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息类型" v-if="activeData.moduleList[activeData.__config__.defaultValue].setType===2">
          <el-select v-model="activeData.moduleList[activeData.__config__.defaultValue].sourceMesType" @change="mestypechange">
              <el-option v-for="mesitem in messageType" :key="mesitem.value" :label="mesitem.label" :value="Number(mesitem.value)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容" v-if="activeData.moduleList[activeData.__config__.defaultValue].setType===2">
          <el-select v-model="activeData.moduleList[activeData.__config__.defaultValue].sourceMesText" @change="mesTextchange">
              <el-option v-for="mestext in messageTextList[activeData.moduleList[activeData.__config__.defaultValue].sourceMesType]" :key="mestext.id" :label="mestext.title" :value="Number(mestext.id)"></el-option>
          </el-select>
        </el-form-item>
                    <el-form-item label="显示文字" v-if="activeData.moduleList[activeData.__config__.defaultValue].setType===1">
        
    <el-input v-model="activeData.moduleList[activeData.__config__.defaultValue].text" placeholder="最多输入20个字" maxlength="20"></el-input>
  
           
        </el-form-item>
        <el-form-item  label="卡片类型">
                  <el-select placeholder="请选择" v-model="activeData.columnType" style="width:100%;">
                    <el-option label="单列卡片" value="signle"></el-option>
                      <el-option label="双列卡片" value="double"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="默认显示数量">
                  <el-select placeholder="请选择" v-model="activeData.columnNum" style="width:100%;" @change="columnNumChange">
                    <el-option label="1" :value="1"></el-option>
                    <el-option label="2" :value="2"></el-option>
                    <el-option label="3" :value="3"></el-option>
                    <el-option label="4" :value="4"></el-option>
                    <el-option label="5" :value="5"></el-option>
                    <el-option label="6" :value="6"></el-option>
                  </el-select>
                </el-form-item>
                     <el-form-item label="填充背景">
          <div class="moduleinfo">
            <el-radio-group v-model="activeData.moduleList[activeData.__config__.defaultValue].backColorType" class="moduleinfo">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">隐藏</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
           
          </div>
          <div style="display:flex" v-show="activeData.moduleList[activeData.__config__.defaultValue].backColorType === 2">
            <span>颜色：</span>
            <el-color-picker
              class="hideInfo"
              v-model="activeData.moduleList[activeData.__config__.defaultValue].background"
              size="mini"
            ></el-color-picker>
          </div>
          <div v-show="activeData.moduleList[activeData.__config__.defaultValue].backColorType === 2">
            <span>图片：</span>
            <div class="picStyle">
              <div class="imgUploadBox" @mouseenter="showDel=true" @mouseleave="showDel=false">
                 <img v-if="activeData.moduleList[activeData.__config__.defaultValue].imgurl" :src="activeData.moduleList[activeData.__config__.defaultValue].imgurl" />
                 <span class="delbox" @click="activeData.moduleList[activeData.__config__.defaultValue].imgurl=''" v-if="showDel && activeData.moduleList[activeData.__config__.defaultValue].imgurl">
                  <i class="el-icon-delete"></i>
                 </span>
              </div>
                          <el-upload
                              class="upload-demo"
                              ref="upload"
                              :action="uploadFileUrl"
                              :file-list="fileList"
                              :headers="{'Authorization':`Bearer ${token}`}"
                              :on-success="handleUploadSuccess"
                              :before-upload="beforeUploadHandler"
                              :multiple="false"
                              :show-file-list="false">
                              <el-button slot="trigger" size="small" ><i class="el-icon-upload el-icon--right"></i>上传图片</el-button>
                          </el-upload>
                      </div>
          </div>
        </el-form-item>
        <el-form-item  label="跳转类型">
                  <el-select placeholder="请选择" v-model="activeData.moduleList[activeData.__config__.defaultValue].jumpType" size="small" style="width:100%;">
                      <el-option label="不跳转" value="no"></el-option>
                      <el-option label="跳转至页面" value="page"></el-option>
                      <el-option label="跳转至功能" value="function"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="链接功能" v-if="activeData.moduleList[activeData.__config__.defaultValue].jumpType == 'function'">
                  <el-select filterable placeholder="请选择"  size="small" style="width:100%;" v-model="activeData.moduleList[activeData.__config__.defaultValue].functionMenu">
                     <el-option v-for=" item in this.$store.state.mobile.functionMenu" :label="item.name" :value="item.path" :key='item.name'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="设置页面" v-if="activeData.moduleList[activeData.__config__.defaultValue].jumpType == 'page'">
                  <el-select placeholder="请选择" size="small" style="width:100%;"  v-model="activeData.moduleList[activeData.__config__.defaultValue].jumpPath">
                    <el-option v-for=" item in this.$store.state.mobile.pageStore" :label="item" :value="item" :key='item'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文本设置" style="margin-top:15px;">
          <el-select v-model="moduleimgType">
            <el-option label="模块名称" :value="1"></el-option>
            <el-option label="显示文字" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字号" v-if="moduleimgType===1">
           <el-select
                        v-model="activeData.fontSizeModule"
                        :style="{width: '100px'}" @change="changeFont3"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置" v-if="moduleimgType===1">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-model="activeData.backColorModule" size="mini" ></el-color-picker></span>
                      <span :class="activeData.boldModule ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('boldModule')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italicModule ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italicModule')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underlineModule ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underlineModule')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlignModule == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlignModule','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlignModule == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlignModule','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlignModule == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlignModule','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlagModule ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlagModule')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeightModule" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlagModule"  @change="changeHeight3"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
        <el-form-item label="字号" v-if="moduleimgType===2">
           <el-select
                        v-model="activeData.moduleList[activeData.__config__.defaultValue].fontSize"
                        :style="{width: '100px'}"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置"  v-if="moduleimgType===2">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-model="activeData.moduleList[activeData.__config__.defaultValue].backColor" size="small" ></el-color-picker></span>
                      <span :class="activeData.moduleList[activeData.__config__.defaultValue].bold ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyleImg('bold')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.moduleList[activeData.__config__.defaultValue].italic ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyleImg('italic')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.moduleList[activeData.__config__.defaultValue].underline ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyleImg('underline')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.moduleList[activeData.__config__.defaultValue].textAlign == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttextImg('textAlign','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.moduleList[activeData.__config__.defaultValue].textAlign == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttextImg('textAlign','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.moduleList[activeData.__config__.defaultValue].textAlign == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttextImg('textAlign','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.moduleList[activeData.__config__.defaultValue].heightFlag ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyleImg('heightFlag')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.moduleList[activeData.__config__.defaultValue].lineHeight" style="width:100px;margin-left:10px;"
                        v-show="activeData.moduleList[activeData.__config__.defaultValue].heightFlag"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
      </template>
      <template v-if="activeData.__config__.tag==='biaoqian'">
         <el-form-item label="模块名称">
        <div class="moduleinfo">
            <el-input
              v-model="activeData.moduleName"
              placeholder="请输入模块名称"
            ></el-input>
            <el-checkbox v-model="activeData.isHide" class="hideInfo"
              >隐藏</el-checkbox
            >
          </div>
        </el-form-item>
        <el-form-item label="模块样式">
         <div class="biaoqianbox">
          <img :src="tabstyle1" alt="" class="tabimg" @click="biaoqianbtn(1)" :style="{borderColor:activeData.styletype===1?'#1890FF':'#ccc'}">
          <img :src="tabstyle2" alt="" class="tabimg" @click="biaoqianbtn(2)" :style="{borderColor:activeData.styletype===2?'#1890FF':'#ccc'}">
         </div>
        </el-form-item>
        <el-form-item label="标签项列表">
          <el-table border
      :data="activeData.tabList"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="标签项名称"
        align="center"
        >
        <template slot-scope="scope">
          <el-input v-model="scope.row.title"></el-input>
        </template>
      </el-table-column>
    
      <el-table-column
              prop="sort"
              label="排序"
              align="center"
            >
              <template slot-scope="scope">
                  <i v-if="scope.$index !==0"  class="el-icon-top" style="cursor: pointer;" @click="moveUptab(scope.$index,scope.row)"></i>
                  <i v-if="scope.$index !==(activeData.tabList.length-1)" class="el-icon-bottom" style="cursor: pointer;" @click="moveDowntab(scope.$index,scope.row)" ></i>
                  <!-- <img :src="up" alt="" style="width:15px;height:22px;display:flex;align-items:center;" @click="changeIndex(scope.row.index,-1)">
                  <img :src="down" alt="" style="width:15px;height:22px;display:flex;align-items:center"  @click="changeIndex(scope.row.index,1)"> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="sort"
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <i class="el-icon-delete" @click="deletetab(scope.$index)"></i>
              </template>
            </el-table-column>
    </el-table>
    <div style="text-align:center;margin-top:10px;"><el-button @click="addTabInfo" :disabled="activeData.tabList.length===4">添加</el-button></div>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>
import boldIcon from '@/assets/images/bold_icon.png'
import italicIcon from '@/assets/images/italic.png'
import underlineIcon from '@/assets/images/underline.png'
import justifyLeft from '@/assets/images/justifyLeft.png'
import justifyCenter from '@/assets/images/justifyCenter.png'
import justifyRight from '@/assets/images/justifyRight.png'
import lineHeight from '@/assets/images/lineHeight.png'
import rlinkM from '@/assets/images/rlink-m.png'
import {getAccessToken} from '@/utils/auth'
import {getMyMessage,getMyMessageByDictType} from '@/api/custom/message'
export default {
  props: ["activeData"],
  data() {
    return {
      searchicon:require('@/assets/images/ic_sousuo.png'),
      tabstyle1:require('@/assets/images/tabstyle1.png'),
      tabstyle2:require('@/assets/images/tabstyle2.png'),
      token:'',
      showDel:false,
      boldIcon,
          italicIcon,
          underlineIcon,
          justifyLeft,
          justifyCenter,
          justifyRight,
          lineHeight,
      ind: 0,
      fontSize: [
            {label: '10px',val: '10px'},
            {label: '11px',val: '11px'},
            {label: '12px',val: '12px'},
            {label: '13px',val: '13px'},
            {label: '14px',val: '14px'},
            {label: '15px',val: '15px'},
            {label: '16px',val: '16px'},
            {label: '18px',val: '18px'},
            {label: '20px',val: '20px'},
            {label: '24px',val: '24px'},
            {label: '30px',val: '30px'},
            {label: '36px',val: '36px'},
            {label: '48px',val: '48px'},
            {label: '60px',val: '60px'},
            {label: '72px',val: '72px'},
            {label: '84px',val: '84px'},
            {label: '96px',val: '96px'},
            {label: '108px',val: '108px'},
            {label: '120px',val: '120px'},
          ],
          rlinkM,
          uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
          fileList:[],
          moduleTextType:1,
          moduleimgType:1,
          messageType:[],
          messageTextList:[],
          mestextsave:[],
          searchPageNo:1
    };
  },
  created(){
    this.getMessageType()
    this.getMesList();
  },
  mounted(){
    this.token =  getAccessToken()
  },
  methods: {
    getMessageType(){
            getMyMessageByDictType().then((res) => {
                if(res.code === 0){
                    this.messageType = res.data;
                }   
            })
        },
    heightSetChange(val) {
      if (/^\d+$/.test(val) && val > 0) {
        this.activeData.heightSet = val;
      } else {
        this.activeData.heightSet = 30;
        this.$message.warning("请输入大于零的整数");
      }
    },
    selectIcon() {
      let _that = this;
      let imgload = document.createElement("input");
      imgload.type = "file";
      imgload.hidden = true;
      console.log(this.$refs.iconbox);
      this.$refs.iconbox.appendChild(imgload);
      imgload.click();
      imgload.onchange = function () {
        if (!/\.(jpg|jpeg|gif|bmp|png)$/i.test(this.files[0].name)) {
          _that.$message.warning("请上传图片类型");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(this.files[0]);
          reader.onload = function (readRes) {
            _that.activeData.iconimg = readRes.target.result;
          };
        }
      };
    },
    leftmove() {
      this.$refs.textul.scrollBy(30, 0);
    },
    rightmove() {
      this.$refs.textul.scrollBy(-30, 0);
    },
    fonttext(data,position) {
        this.$set(this.activeData,data,position );
      },
      fontStyle(data) {
        this.activeData[data] = !this.activeData[data] 
        this.$set(this.activeData,data,this.activeData[data] );
      },
      changeFont(val){
        this.$set(this.activeData,'fontSize',val);
      },
      changeHeight(val) {
         this.$set(this.activeData,'lineHeight',val);
      },
      changeFont2(val){
        this.$set(this.activeData,'fontSize2',val);
      },
      changeHeight2(val) {
         this.$set(this.activeData,'lineHeight2',val);
      },
      changeFont3(val){
        this.$set(this.activeData,'fontSizeModule',val);
      },
      fontStyleCent(data) {
        this.activeData.moduleList[this.ind][data] = !this.activeData.moduleList[this.ind][data] 
      },
      fonttextCent(data,position) {
        this.activeData.moduleList[this.ind][data] = position;
      },
      fontStyleImg(data) {
        this.activeData.moduleList[this.activeData.__config__.defaultValue][data] = !this.activeData.moduleList[this.activeData.__config__.defaultValue][data];
    
      },
      fonttextImg(data,position) {
        this.activeData.moduleList[this.activeData.__config__.defaultValue][data] = position;
       
      },
      changeHeight3(val) {
         this.$set(this.activeData,'lineHeightModule',val);
      },
      changeSearchType(id){
        this.$set(this.activeData,'curid',id);
      },
      moveUp(index,row) {
      var that = this;
      let upDate = this.activeData.searchData[index - 1];
      this.activeData.searchData.splice(index - 1, 1);
      this.activeData.searchData.splice(index,0, upDate);
    },
    //向下移动
    moveDown(index,row){
      var that = this;
      let downDate = this.activeData.searchData[index + 1];
      this.activeData.searchData.splice(index + 1, 1);
      this.activeData.searchData.splice(index,0, downDate);
    },
    moveUptab(index,row) {
      var that = this;
      let upDate = this.activeData.tabList[index - 1];
      this.activeData.tabList.splice(index - 1, 1);
      this.activeData.tabList.splice(index,0, upDate);
    },
    //向下移动
    moveDowntab(index,row){
      var that = this;
      let downDate = this.activeData.tabList[index + 1];
      this.activeData.tabList.splice(index + 1, 1);
      this.activeData.tabList.splice(index,0, downDate);
    },
    beforeUploadHandler(file){
      if (!/\.(jpg|jpeg|gif|bmp|png)$/i.test(file.name)) {
          this.$message.warning("请上传图片类型");
          return false;
        }
      if(file.size>2*1024*1024){
        this.$message.warning('上传图片不能超过2M');
         return false;
      }else{
        return true;
      }
    },
    // 上传成功回调
      handleUploadSuccess(response, file, fileList) {
      if(response){
       if(this.activeData.__config__.tag === 'word-swipe'){
        this.activeData.iconimg = response.data;
       }else{
        this.activeData.moduleList[this.activeData.__config__.defaultValue].imgurl = response.data;
       }
      }else{
        this.$message.error('上传失败')
      }
      },
      biaoqianbtn(val){
        
        this.$set(this.activeData,'styletype',val);
    
      },
      deletetab(ind){
        if(this.activeData.tabList.length===1){
          this.$message.warning('至少保留一个标签项');
          return;
        }
        this.activeData.tabList.splice(ind,1);
      },
      addTabInfo(){
       
        this.activeData.tabList.push({
          fields:[],
          title:'默认标签'
        });
      },
      columnNumChange(val){
       if(this.activeData.moduleList.length<val){
        let n = val - this.activeData.moduleList.length;
        for(let i =0;i<n;i++){
          this.activeData.moduleList.push({
          imgurl:'',
                width:150,
                height:140,
                background:'#ffffff',
                backColorType:0,
                text:'默认文字',
                jumpType:'no',
             jumpPath: '',
             functionMenu: '',
             fontSize:'14px',
                backColor:'#000000',
                bold:false,
                italic:false,
                underline:false,
                textAlign:'left',
                heightFlag:false,
                lineHeight:'30px',
                setType:1,
                sourceMesType:'',
                sourceMesText:''
        })
        }
       }else{
        this.activeData.moduleList = this.activeData.moduleList.slice(0,val);
       }
       this.activeData.__config__.defaultValue = this.activeData.moduleList.length - 1;
      },
      async getMesList(){
        let arr = await getMyMessage({
          pageNo: this.searchPageNo,
          pageSize:20,
          value: "",
          statusList: '',
          types: [],
          sortord: 'DESC'
        });
        this.mestextsave.push(...arr.data.list);
        if(arr.data.list.length==20){
            this.searchPageNo++;
            this.getMesList();
        }else{
            this.searchPageNo = 1;
        }
      },
      setTypechange(){
        this.activeData.moduleList[this.activeData.__config__.defaultValue].sourceMesType = '';
        this.activeData.moduleList[this.activeData.__config__.defaultValue].sourceMesText = '';
        this.activeData.moduleList[this.activeData.__config__.defaultValue].text = '';
      },
      mestypechange(val){
        console.log(val,'vvvvv');
        this.activeData.moduleList[this.activeData.__config__.defaultValue].sourceMesText = '';
        this.activeData.moduleList[this.activeData.__config__.defaultValue].text = '';
        if(!Array.isArray(this.messageTextList[val]) || (Array.isArray(this.messageTextList[val]) && !this.messageTextList[val].length)){
          this.messageTextList[val] = this.mestextsave.filter(item=>{
            return item.type===val;
          })
        }
        console.log(this.messageTextList[val]);
      },
      mesTextchange(val){
        console.log(val,22222);
        let arr = this.messageTextList[this.activeData.moduleList[this.activeData.__config__.defaultValue].sourceMesType];
        let str = arr.find(item=>{
          return Number(item.id)===val;
        }).title;
        this.activeData.moduleList[this.activeData.__config__.defaultValue].text = str.slice(0,20);
      },
      searchTurn(ind){
       this.activeData.searchData[ind].isSearch = !this.activeData.searchData[ind].isSearch;
      }
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/mobileRightPanel';
.modulesbox{
    padding:0 10px;
    box-sizing: border-box;
}
.moduleinfo {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 36px;
  .inputinfo {
    width: 70px;
  }
  .textList {
    width: 100%;
    margin: 0 10px;
    overflow-x: auto;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    padding: 0;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    li{
      white-space: nowrap;
    }
    li + li {
      margin-left: 30px;
    }
    .curcolor {
      color: #1890FF;
    }
    .textlunbo{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
    }
  }
  .turninfo {
    padding: 3px;
    cursor: pointer;
  }
}
.hideInfo {
    margin-left: 15px;
  }
.continfo{
  display:flex;
  flex-wrap: nowrap;
  align-content: center;
  margin-bottom:10px;
  .centinfo{
    flex:none;
    margin-right:5px;
  }
}
.listbox {
  align-items: flex-start;
}
.mesbox {
  font-size:14px;
  margin-bottom: 10px;
}
.setBox{
  display:flex;
  flex-wrap: nowrap;
  align-items: center;
}
.searchStyle{
  .searchitem{
    display:flex;
    flex-wrap: nowrap;
    margin:10px 0;
    
    justify-content: space-between;
    .searchinfo{
      padding:4px 8px;
      border:1px solid white;
      width:220px;
      cursor: pointer;
      .searchone{
        display:flex;
        align-items: center;
        border:1px solid #ccc;
        position: relative;
       .searchicon{
       position:absolute;
       left:8px;
       top:50%;
       transform: translateY(-50%); 
        width:20px;
        height:20px;
       }
       .searchtext{
        text-align: center;
        height:45px;
        line-height: 45px;
        color:#979797;
        width:100%;
       }
      }
    }
  }
}
.addkeyinfo{
  cursor: pointer;
  padding:5px 7px;
 color: #1890FF;
 margin:0 10px;
 border:1px solid #1890FF;
 border-radius: 2px;
}
.keyinfo{
  cursor: pointer;
  padding:5px 7px;
  border:1px solid #ddd;
  margin:0 10px;
  border-radius: 2px;
}
.picStyle{
        .imgUploadBox{
            width: 240px;
            height: 120px;
            border:1px solid #ccc;
            margin-bottom:10px;
            position: relative;
            .delbox{
              font-size:18px;
              color:#1890FF;
              position: absolute;
              right:2px;
              top:0px;
              cursor: pointer;
            }
        }
        img{
            width:100%;
            height:100%;
        }
        .upload-demo{
            text-align: center;
            margin-right: 148px;
            i{
                margin-right: 5px;
            }
        }
    }
    .picWidth{
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 20px;
            height: 20px;
            margin: 0 5px;
        }
    }
    .biaoqianbox{
      display:flex;
     .tabimg{
        width:132px;
        height:100px;
        margin-right:15px;
        cursor: pointer;
        border:1px solid #ccc;
      }
    }
    .colorSetBox{
      display:flex;
    }
</style>
<style>
  .modulesbox .el-color-picker__trigger{
     padding:0;
     border-radius: 50%;
     border:none;
     width:28px;
     height:28px;
   }
  .modulesbox .el-color-picker__color{
     border-radius: 50%;
   }
   .modulesbox .el-color-picker__color-inner{
     border-radius: 50%;
   }
 </style>